<template>
    <div class="container" ref="scrollableContainer">
        <TopMain class="top-main" v-if='ifLogin' @ToKePu="ToKePu" @ToShuJu="ToShuJu"/>
        <Top1 class="top1" v-if='!ifLogin'/>
    <section id="img-one" class="Img">
        <div style="width:100%;height:100%;background-color: rgba(0, 0, 0, 0.3);z-index:5"></div>
        <h1 style="position:absolute;top:280px;z-index:10;">DETECTION</h1>
    </section>
    <section id="img-two" class="img" style="border-top: 30px solid #e53e38;">
        <div style="background: #fcd3d3;width:100%;height:38%;position: relative;top:13%;">
        </div>
        <div style="position:absolute;top:330px;left: 130px;width:50%;">
            <div v-for="(item,key) in DuOfInformation"  :key="key" >
                <h6 style="color: #b63428;z-index: 10;text-shadow: none;font-size: 28px;font-weight:1000;font-family: 幼圆;" >{{ item.name }}</h6>
                <h6 style="color: #b63428;z-index: 10;text-shadow: none;font-size: 15px;font-weight:600;font-family: 幼圆;width:650px;padding-bottom: 10px;">{{ item.content }}</h6>
            </div>
        </div>
        <h1 style="position: absolute;top:7%;left:100px;font-size: 230px;">GALBLE</h1>
        <svg width="100%" height="100%" style="position: absolute;left: 800px;top:-60px;">    
            <defs>    
                <mask id="holeMask1">    
                    <rect :x="maskRectX1" y="200" width="1000" height="100" rx="50" ry="50" fill="white" />    
                    <rect :x="maskRectX2" y="320" width="1000" height="100" rx="50" ry="50" fill="white" />  
                    <rect :x="maskRectX3" y="440" width="1000" height="100" rx="50" ry="50" fill="white" />  
                    <rect :x="maskRectX4" y="560" width="1000" height="100" rx="50" ry="50" fill="white" /> 
                </mask>    
            </defs>    
            <image xlink:href="https://img1.baidu.com/it/u=1969638451,4166490111&fm=253&fmt=auto&app=120&f=PNG?w=617&h=372" x="0" y="200" width="55%" mask="url(#holeMask1)" />    
        </svg>
    </section>
    <section id="img-three" class="img" style="border-top: 30px solid #e96813;">
        <div style="background:  #f8e3c5;width:67%;height:80%;position: absolute;top:10%;right: 0px;">
        </div>
        <h1 style="position: absolute;top:20%;left:45%;font-size: 260px;opacity: 20%;">S E X</h1>
        <svg id="rotatingSvg" width="88%" height="100%" style="position: absolute;left: -22%;top:0%;">  
        <defs>  
            <mask id="holeMask2">    
            <circle cx="50%" cy="50%" r="24%" fill="white" /> 
            </mask>  
        </defs>  
        <image id="rotatingImage" y="-80" xlink:href="@/assets/女人.webp" width="45%" mask="url(#holeMask2)" x="370"/>  
        </svg>  
        <div style="position:absolute;top:230px;left: 700px;width:50%;">
            <div v-for="(item,key) in HuangOfInformation"  :key="key" >
                <h6 style="color: #ff7700;z-index: 10;text-shadow: none;font-family: 幼圆;font-size: 28px;font-weight:1000;" >{{ item.name }}</h6>
                <h6 style="color: #ff7700;z-index: 10;text-shadow: none;font-family: 幼圆;font-size: 15px;font-weight:600;width:650px;padding-bottom: 30px;">{{ item.content }}</h6>
            </div>
        </div>
    </section>
    <section id="img-four" class="img" style="border-top: 30px solid #337ecc;">
        <div style="background:  #c6e2ff;width:100%;height:30%;position: absolute;bottom: 0%;">
            <h1 style="position: absolute;top:-70%;left:10%;font-size: 350px;opacity: 30%;">S C A M</h1>
        </div>
        <div style="background:#337ecc;width:100%;height:7%;position: absolute;top:12%;">
        </div>
        <h1 style="position: absolute;top:-2%;left:10%;font-size: 150px;">S C A M</h1>

        <svg width="100%" height="100%" style="position: absolute;left: 750px;top:150px;">  
        <defs>  
            <mask id="holeMask3">  
                <rect x="30" :y="maskRectX3" width="100" height="400" rx="50" ry="50" fill="white" /> 
                <rect x="150" :y="maskRectX1" width="100" height="400" rx="50" ry="50" fill="white" />    
                <rect x="270" :y="maskRectX2" width="100" height="400" rx="50" ry="50" fill="white" />  
                <rect x="390" :y="maskRectX3" width="100" height="400" rx="50" ry="50" fill="white" />  
                <rect x="510" :y="maskRectX4" width="100" height="400" rx="50" ry="50" fill="white" />   
            </mask>  
        </defs>  
        <image xlink:href="https://img1.baidu.com/it/u=138154651,4237234318&fm=253&fmt=auto&app=120&f=JPEG?w=608&h=396" width="60%" x="-30" mask="url(#holeMask3)" />  
        </svg> 
        <div style="position:absolute;top:190px;left: 150px;width:43%;">
            <div v-for="(item,key) in PianOfInformation"  :key="key" >
                <h6 style="color: white;z-index: 10;text-shadow: none;font-family: 幼圆;font-size: 25px;font-weight:1000;" >{{ item.name }}</h6>
                <h6 style="color: white;z-index: 10;text-shadow: none;font-family: 幼圆;font-size: 15px;font-weight:500;width:600px;padding-bottom: 30px;">{{ item.content }}</h6>
            </div>
        </div> 
    </section>
    <section id="img-five" class="img" style="border-top: 30px solid #81e450;">
        <div style="position: absolute; 
            top:0%;
            right:0px;
            width: 800px;  
            height: 100%;  
            background-color: #d1edc4;  clip-path: polygon(0 0,18% 100%,100% 100%,100% 0%);overflow: hidden;">
            <h1 style="position: absolute;top:-2%;left:15px;font-size: 200px;white-space: nowrap;">BLACK BLACK</h1>
        </div>
        <div class="slash">
            <div class="slash2">
                <img src="https://n.sinaimg.cn/tech/transform/231/w481h550/20190122/XQ7U-hryfqhk5016144.jpg" width="100%" height="100%" />
            </div>
        </div>  
        <div class="slash3">
            <h1 style="position: absolute;bottom:20px ;left:20px;font-size: 180px;">BLACK</h1>
        </div> 
        <div style="position:absolute;top:300px;left: 820px;width:45%;">
            <div v-for="(item,key) in BlackOfInformation"  :key="key" >
                <h6 style="color: #529b2e;z-index: 10;text-shadow: none;font-family: 幼圆;font-size: 28px;font-weight:1000;" >{{ item.name }}</h6>
                <h6 style="color: #529b2e;z-index: 10;text-shadow: none;font-family: 幼圆;font-size: 15px;font-weight:600;width:500px;padding-bottom: 30px;">{{ item.content }}</h6>
            </div>
        </div>     
    </section>
    <!-- <section id="img-six" class="img">
        <div style="width:100%;height:100%;background-color: rgba(0, 0, 0, 0.3);z-index:5"></div>
        
    </section>
    <section id="img-six" class="img">
        <div style="width:100%;height:100%;background-color: rgba(0, 0, 0, 0.3);z-index:5"></div>
    </section>
    <section id="footer">FOOTER</section> -->
</div>
<div v-if="showBackToTop" position="bottom-right" :offset="[0, 20]" class="el-affix" style="z-index: 10;position:absolute;bottom: 70px;right:50px;">
    <el-button @click="backToTop" style="background-color: rgba(0, 0, 0, 0.7);
    box-shadow: 0 0px 35px rgba(0,0,0,0.1);;border:none;color:white;">返回顶部</el-button>
  </div>
</template>
<script lang='ts' setup>
import { ref, defineProps, onMounted, onUnmounted } from "vue";
import Top1 from '@/components/home/Top1.vue'
import TopMain from '@/components/home/TopMain.vue'
import {useStore} from 'vuex'
import { useRouter } from 'vue-router';
const router = useRouter();
const store =useStore();
const ifLogin=ref(true);
const DuOfInformation=store.state.KePuOfInformation.DuOfInformation;
const HuangOfInformation=store.state.KePuOfInformation.HuangOfInformation;
const PianOfInformation=store.state.KePuOfInformation.PianOfInformation;
const BlackOfInformation=store.state.KePuOfInformation.BlackOfInformation;
const showBackToTop = ref(false);
const scrollableContainer = ref<HTMLElement | null>(null);   
      

// 创建响应式引用以存储遮罩矩形的 x 坐标  
const maskRectX1 = ref(0); 
const maskRectX2 = ref(0);  
const maskRectX3 = ref(0);
const maskRectX4 = ref(0);
// 定义动画参数  
const startX1 = 10;  
const endX1 = 100; // 遮罩矩形浮动的最右位置  
let direction1 = 1; // 1 表示向右，-1 表示向左
const startX2=20;
const endX2=100;
let direction2=-1;
const startX3 = 30;  
const endX3 = 120; // 遮罩矩形浮动的最右位置  
let direction3 = 1;
const startX4 = 30;  
const endX4 = 130; // 遮罩矩形浮动的最右位置  
let direction4 = -1;
    
      // 动画函数  
function animateMask() {  
// 更新矩形的 x 位置  
    maskRectX1.value += 0.8 * direction1; // 每次移动 10 个单位  
    maskRectX2.value += 0.5 * direction2; // 每次移动 10 个单位 
    maskRectX3.value += 1 * direction3;
    maskRectX4.value += 0.6 * direction4;
    // 检查是否到达边界，并反转方向  
    if (maskRectX1.value >= endX1) {  
    direction1 = -1;  
    } else if (maskRectX1.value <= startX1) {  
        direction1 = 1;  
    }  
    if (maskRectX2.value >= endX2) {  
        direction2 = -1;  
    } else if (maskRectX2.value <= startX2) {  
        direction2 = 1;  
    }  
    if (maskRectX3.value >= endX3) {  
        direction3 = -1;  
    } else if (maskRectX3.value <= startX3) {  
        direction3 = 1;  
    } 
    if (maskRectX4.value >= endX4) {  
        direction4 = -1;  
    } else if (maskRectX4.value <= startX4) {  
        direction4 = 1;  
    }   
    // 使用 requestAnimationFrame 来继续动画  
    requestAnimationFrame(animateMask);  
}  
    
      // 在组件挂载后启动动画  
onMounted(() => {  
    animateMask(); 
    if (scrollableContainer.value) {  
        scrollableContainer.value.addEventListener('scroll', handleScroll); 
    }   
});  
const handleScroll = () => {
    if (scrollableContainer.value !== null) {
        const scrollTop = scrollableContainer.value.scrollTop;
        showBackToTop.value = scrollTop > 1000; // 当滚动超过200px时显示按钮  
        console.log("111", showBackToTop.value)
    }
};
//跳到科普
const ToKePu=()=>{
    if(scrollableContainer.value){
        scrollableContainer.value.scrollTop=813;
    }
}
//跳到数据
const ToShuJu=()=>{
    if(scrollableContainer.value){
        scrollableContainer.value.scrollTop=4063;
    }
}
//返回顶部
const backToTop = () => {  
  if (scrollableContainer.value) {  
    scrollableContainer.value.scrollTop = 0;  
  }  
}; 
  
onUnmounted(() => {  
  if (scrollableContainer.value) {  
    scrollableContainer.value.removeEventListener('scroll', handleScroll);  
  }  
});
</script>
<style scoped>

.container{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height:100vh;
    overflow-x: hidden;
}
::-webkit-scrollbar {  
    display: none;  
} 
.img-two-D {  
        background:rgba(86, 86, 86, 0.5) ;
        /* 其他样式 */  
        width: 100%; /* 设置宽度 */  
        height: 200px; /* 设置高度 */  
        text-align: center; /* 使h1文本居中 */  
        line-height: 200px; /* 垂直居中h1文本（与高度相同） */  
        color: white; /* 设置文本颜色为白色，以便在深色背景上可见 */  
    }  
h1{
   color: white;
}

h6{
    text-shadow: none;
}

section,
#footer {
    height: 100vh;
    position: relative;
    color: rgba(255, 255, 255, .8);
    font-size: 10vh;
    font-family: 'modern_no._20regular', serif;
    text-shadow: 4px 4px rgb(46, 43, 43);
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    user-select: none;
    overflow: hidden;
}
#img-one,#img-six {
    background-image: url('@/assets/凶猛的狼.png');
}
 
#img-two {
    background:#f5776c;
}
#img-three {
    background:#e68c3d}
#img-four {
    background:#409EFF;
}
#img-five{
    background:#54ce17;
}
.text-box {
    /* 其他样式 */
    background-color: rgba(0, 0, 0, .3);
    transform-origin: center bottom;
    transform: skew(0, -8deg);
}
 
.text-box .cnt {
    /* 其他样式 */
    transform-origin: right bottom;
    transform: skew(0, 8deg);
}
#footer {
    background-color: #909399;
    height: 30vh;
    color: #fff;
    font-size: 20vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
  
#img-five .slash {  
    position: absolute; 
    top:0%;
    left:0px;
    width: 700px;  
    height: 100%;  
    background-color:#95d475;  
    clip-path: polygon(0 0, 79% 0, 100% 100%, 0% 100%);
    overflow: hidden;
} 
.slash2 {  
    position: absolute; 
    top:5%;
    left:0px;
    width: 580px;  
    height: 90%;   
    clip-path: polygon(0 0, 77% 0, 100% 100%, 0% 100%);
    overflow: hidden;
} 
.slash3 {  
    position: absolute; 
    top:0%;
    left:0px;
    width: 125px;  
    height: 100%;  
    background-color: #b3e19d; 
    clip-path: polygon(0 0, 10% 0, 100% 100%, 0% 100%);
    overflow: hidden;
} 
@keyframes rotate {  
    from {  
        transform: rotate(0deg);  
    }  
    to {  
        transform: rotate(360deg);  
    }  
}  
  
#rotatingSvg {  
    /* 应用动画 */  
    animation: rotate 40s linear infinite;  
    /* 使SVG在其自身中心旋转 */  
    transform-origin: center center;  
} 
.top-main{
    position:absolute;
    top:0px;
    width:100%;
    height:8%;
    z-index:10;
    border-radius: 0px;
}

.top1{
    position: fixed;
    top:40%;
    left:1400px;
    width:250px;
    height:140px;
    border-radius: 10px 0px 0px 10px;
    background-color: rgba(0, 0, 0, 0.7);
    box-shadow: 0 0px 35px rgba(0,0,0,0.6);
    z-index:10;
}
</style>